<template>
  <div class="configuration-situation">
    <div class="left-evo">
      <div class="con-title">
        <span>事件概览</span>
        <el-select v-model="timeValue" class="cont-title-rt" placeholder="请选择" @change="changeTime">
          <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="l-value hk-flex">
        <div class="l-value-lt hk-flex">
          <img src="@/assets/images/shijian.png" alt="" />
          <span>事件总数(条)：</span>
          <b>{{ total }}</b>
        </div>
        <div class="l-value-rt">
          <!-- <el-progress :percentage="ratio" :stroke-width="10"   v-if="!isNaN(parseInt(ratio))"></el-progress> -->
          <el-row>
            <!-- <el-col :span=""></el-col> -->
          </el-row>
          <div class="progress-tip hk-flex">
            <div class="progress-tip-list progress-tip-list0" @click="changeDisposalStatus(0)">
              <span class="radius-icon"><i /></span>
              <span>未处置</span>
              <span class="font-color font-yellow">{{ unDisposaledNum }}</span>
            </div>
            <div class="progress-tip-list progress-tip-list1" @click="changeDisposalStatus(5)">
              <span class="radius-icon"><i /></span>
              <span>处置中</span>
              <span class="font-color font-purple">{{ disposalingNum }}</span>
            </div>
            <div class="progress-tip-list progress-tip-list2" @click="changeDisposalStatus(3)">
              <span class="radius-icon"><i /></span>
              <span>已处置</span>
              <span class="font-color font-green">{{ disposaledNum }}</span>
            </div>
            <el-button v-if="disposalStatus != undefined" type="text" style="margin-left: 10px" @click="resetStatus"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <el-row v-if="pieData1.data.length > 0" :gutter="20" class="things">
        <el-col :span="8">
          <PieChart :cdata="pieData1" height="340px" />
        </el-col>
        <el-col :span="8">
          <PieChart :cdata="pieData2" height="340px" />
        </el-col>
        <el-col :span="8">
          <PieChart :cdata="pieData3" height="340px" />
        </el-col>
      </el-row>
    </div>
    <div class="right-evo">
      <div class="con-title">
        <span class="title">事件发生排行</span>
        <el-select v-model="thingValue" class="cont-title-rt" placeholder="请选择" @change="changeThing">
          <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="l-value hk-flex" style="border-bottom: 0">
        <el-checkbox v-model="checked" @change="changeThing">仅展示未处置事件</el-checkbox>
        <span class="more" @click="addNew">更多</span>
      </div>
      <template v-if="eventList.length > 0">
        <div v-for="(i, index) in eventList" :key="index" class="event-item hk-flex">
          <div class="event-item-lt">
            <div class="event-item-title hk-flex">
              <i class="very-important mr10">{{ index + 1 }}</i>
              <span> {{ i.title }}</span>
              <span
                class="tlevel"
                :class="
                  i.type == '特别重大' ? 'serious' : i.type == '重大' ? 'major' : i.type == '较大' ? 'big' : 'simple'
                "
                >{{ i.type }}</span
              >
            </div>
            <div class="event-item-cont">
              <el-row :gutter="10">
                <el-col class="hk-flex" :span="8">
                  事件类别:<span class="font-grey">{{ i.category }}</span>
                </el-col>
                <el-col class="hk-flex" :span="8">
                  最早时间:<span class="font-grey">{{ i.earliestTime }}</span>
                </el-col>
                <el-col class="hk-flex" :span="8">
                  最晚时间:<span class="font-grey">{{ i.latestTime }}</span>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="event-item-rt">
            <p>发生次数</p>
            <b>{{ i.count }}</b>
          </div>
        </div>
      </template>
      <el-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<script>
import PieChart from './PieChart'
import { overview, ranking } from '@/api/specialProject/userPortrait'
import { mapState } from 'vuex'
export default {
  components: {
    PieChart,
  },
  props: {
    ip: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      prefix: window.prefix,
      // 占比
      ratio: 0,
      total: 0,
      // 处置状态
      disposalStatus: undefined,
      loading: false,
      disposaledNum: 0,
      disposalingNum: 0,
      unDisposaledNum: 0,
      // 表格数据
      tableData: [{}, {}, {}, {}, {}, {}],
      //  表格
      tableList: [
        { label: '防护产品名称', param: 'name' },
        { label: '状态', param: 'status', type: 'slot' },
        { label: '厂家', param: 'analyseType' },
        { label: '版本信息', param: 'analyseType' },
        { label: '安装时间', param: 'analyseType' },
      ],
      timeValue: '2',
      thingValue: '2',
      checked: false,
      timeOptions: [
        { label: '近一日', value: '1' },
        { label: '近一周', value: '2' },
        { label: '近一月', value: '3' },
      ],
      pieData1: {
        legendShow: true,
        color: ['#FA8C16', '#60CB9A', '#6E8BF2', '#c2c2c2', '#ff3a3a', '#0c78a0'],
        data: [
          { value: 0, name: '特别重大' },
          { value: 0, name: '重大' },
          { value: 0, name: '较大' },
          { value: 0, name: '一般' },
        ],
      },
      pieData2: {
        legendShow: true,
        color: ['#FA8C16', '#60CB9A', '#6E8BF2', '#c2c2c2', '#ff3a3a', '#0c78a0'],
        data: [
          { value: 0, name: '用户违规' },
          { value: 0, name: '网络工具' },
          { value: 0, name: '运维异常' },
          { value: 0, name: '设备设施故障' },
        ],
      },
      pieData3: {
        legendShow: true,
        color: ['#FA8C16', '#60CB9A', '#6E8BF2', '#c2c2c2', '#ff3a3a', '#0c78a0'],
        data: [
          { value: 0, name: '用户行为异常' },
          { value: 0, name: '管理员行为异常' },
          { value: 0, name: '网络服务异常' },
          { value: 0, name: '网络边界异常' },
        ],
      },
      eventList: [
        // {
        //   title: '用户插拔普通存储介质',
        //   type: 'serious',
        //   category: '用户行为异常',
        //   earliestTime: '2022-10-25 10:12:45',
        //   latestTime: '2022-10-25 10:12:45',
        //   count: 25
        // }
      ],
    }
  },
  computed: {
    ...mapState({
      assetsObj: (state) => state.portrait.assetsObj,
    }),
  },
  mounted() {
    setTimeout(() => {
      this.getOverviewData()
      this.getThings({ searchType: '2' })
    }, 500)
  },
  methods: {
    addNew() {
      window.history.pushState(null, ' ', window.zjgfix + '/dispose/incidentHandle?ip=' + this.ip)
      // window.location.reload()
    },
    handleRefresh() {},
    changeDisposalStatus(i) {
      this.disposalStatus = i
      this.getOverviewData()
    },
    resetStatus() {
      this.disposalStatus = undefined
      this.getOverviewData()
    },
    // 获取事件概览
    getOverviewData() {
      const ip = this.assetsObj.equipmentIp || this.ip
      overview({ ip, searchType: this.timeValue }).then((res) => {
        res.forEach((item) => {
          // 判断数据 0 未处置  3  已处置   5  处置中
          if (item.disposal == 0) {
            this.unDisposaledNum = item.count
          } else if (item.disposal == 5) {
            this.disposalingNum = item.count
          } else if (item.disposal == 3) {
            this.disposaledNum = item.count
          }
        })
        // console.log(res, this.disposalStatus)
        if (!this.disposalStatus && this.disposalStatus != 0) {
          this.pieData1.data = res[0].levelTags.map((i) => {
            let num = 0
            let num1 = 0
            if (res[1]) {
              num = res[1].levelTags.filter((ii) => {
                return ii.normalName == i.normalName
              })[0]?.count
            }
            if (res[2]) {
              num1 = res[2].levelTags.filter((ii) => {
                return ii.normalName == i.normalName
              })[0]?.count
            }

            return {
              value: i.count * 1 + num + num1,
              name: i.normalName,
            }
          })

          this.pieData2.data = res[0].typeTags.map((i) => {
            let num = 0
            let num1 = 0
            if (res[1]) {
              num = res[1].typeTags.filter((ii) => {
                return ii.normalName == i.normalName
              })[0]?.count
            }
            if (res[2]) {
              num1 = res[2].typeTags.filter((ii) => {
                return ii.normalName == i.normalName
              })[0]?.count
            }
            return {
              value: i.count * 1 + num + num1,
              name: i.normalName,
            }
          })
          this.pieData3.data = res[0].categoryTags.map((i) => {
            let num = 0
            let num1 = 0
            if (res[1]) {
              num = res[1].categoryTags.filter((ii) => {
                return ii.normalName == i.normalName
              })[0]?.count
            }
            if (res[2]) {
              num1 = res[2].categoryTags.filter((ii) => {
                return ii.normalName == i.normalName
              })[0]?.count
            }
            return {
              value: i.count * 1 + num + num1,
              name: i.normalName,
            }
          })
        } else {
          for (let j = 0; j < res.length; j++) {
            if (this.disposalStatus == 0) {
              if (res[j].disposal == 0) {
                this.pieData1.data = res[j].levelTags.map((i) => {
                  return {
                    value: res[j].disposal == 0 ? i.count : 0,
                    name: i.normalName,
                  }
                })

                this.pieData2.data = res[j].typeTags.map((i) => {
                  return {
                    value: i.count,
                    name: i.normalName,
                  }
                })
                this.pieData3.data = res[j].categoryTags.map((i) => {
                  return {
                    value: i.count,
                    name: i.normalName,
                  }
                })
                break
              } else {
                this.pieData1.data.forEach((item) => {
                  item.value = 0
                })
                this.pieData2.data.forEach((item) => {
                  item.value = 0
                })
                this.pieData3.data.forEach((item) => {
                  item.value = 0
                })
              }
            } else if (this.disposalStatus == 3) {
              if (res[j].disposal == 3) {
                this.pieData1.data = res[j].levelTags.map((i) => {
                  return {
                    value: i.count,
                    name: i.normalName,
                  }
                })
                this.pieData2.data = res[j].typeTags.map((i) => {
                  return {
                    value: i.count,
                    name: i.normalName,
                  }
                })
                this.pieData3.data = res[j].categoryTags.map((i) => {
                  return {
                    value: i.count,
                    name: i.normalName,
                  }
                })
                break
              } else {
                this.pieData1.data.forEach((item) => {
                  item.value = 0
                })
                this.pieData2.data.forEach((item) => {
                  item.value = 0
                })
                this.pieData3.data.forEach((item) => {
                  item.value = 0
                })
              }
            } else if (this.disposalStatus == 5) {
              if (res[j].disposal == 5) {
                this.pieData1.data = res[j].levelTags.map((i) => {
                  return {
                    value: i.count,
                    name: i.normalName,
                  }
                })
                this.pieData2.data = res[j].typeTags.map((i) => {
                  return {
                    value: i.count,
                    name: i.normalName,
                  }
                })
                this.pieData3.data = res[j].categoryTags.map((i) => {
                  return {
                    value: i.count,
                    name: i.normalName,
                  }
                })
                break
              } else {
                this.pieData1.data.forEach((item) => {
                  item.value = 0
                })
                this.pieData2.data.forEach((item) => {
                  item.value = 0
                })
                this.pieData3.data.forEach((item) => {
                  item.value = 0
                })
              }
            }
          }
        }

        this.total = this.unDisposaledNum + this.disposaledNum + this.disposalingNum
        this.ratio = Number.parseInt((this.unDisposaledNum / this.total) * 100)
      })
    },
    // 获取事件发送排行
    getThings(val) {
      const ip = this.assetsObj.equipmentIp || this.ip
      ranking({ ip, ...val }).then((res) => {
        const arr = res.map((item) => {
          return {
            title: item.eventName,
            type: item.eventLevel,
            category: item.eventType,
            earliestTime: item.firstTime,
            latestTime: item.lastTime,
            count: item.eventCount,
          }
        })
        if (arr.length > 5) {
          this.eventList = arr.splice(0, 4)
        } else {
          this.eventList = arr
        }
      })
    },
    changeTime() {
      this.getOverviewData()
    },
    changeThing() {
      const searchType = this.thingValue
      const disposalStatus = this.checked ? 0 : ''
      this.getThings({ disposalStatus, searchType })
    },
  },
}
</script>

<style lang="scss" scoped>
#app.dark-theme {
  .configuration-situation,
  .left-evo,
  .right-evo {
    background: transparent !important;
  }
}
.configuration-situation {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin: 20px 0;

  .left-evo {
    width: 50%;
    background: #fff;
    padding: 20px;
    margin-right: 20px;
    border-radius: 4px;
    // border: 1px solid #000;
    // display: flex;
    // border-radius: 4px;
    // flex-direction: column;
  }

  .right-evo {
    width: 50%;
    background: #fff;
    padding: 20px;
    display: flex;
    border-radius: 4px;
    flex-direction: column;
    .event-item {
      border: 1px solid rgba(0, 0, 0, 0.08);
      margin-bottom: 10px;
      .event-item-lt {
        height: 100%;
        padding: 10px;
        flex: 1;
        width: 70%;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        font-size: 14px;
        .event-item-title {
          i {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            color: #fff;
            &.very-important {
              background: #ff3535;
            }
            &.important {
              background: #fa8c16;
            }
            &.common {
              background: #ffc53d;
            }
            &.larger {
              background: #bfbfbf;
            }
          }
          .border {
            padding: 2px 10px;
            margin-left: 10px;
            border-radius: 2px;
            &.box-very-important {
              background: rgba(255, 63, 63, 0.1);
              border: 1px solid rgba(255, 63, 63, 1);
              color: rgba(255, 63, 63, 1);
            }
          }
        }
        .event-item-cont {
          padding: 10px 10px 0;
          .font-grey {
            // width: 55%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .event-item-rt {
        width: 12%;
        text-align: center;
        b {
          font-size: 20px;
          font-weight: normal;
        }
      }
    }
    &::v-deep {
      .targetTable {
        flex: 1;
        padding-bottom: 0;
        overflow: auto;

        .el-table {
          margin-top: 15px;
        }
      }
    }
  }

  .con-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;

    .con-title-rt {
      float: right;
    }

    .reset {
      font-size: 12px;
      color: #4b6eef;
      font-weight: 400;
    }
  }

  .l-value {
    padding: 20px 0;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .more {
      color: #4b6eef;
      cursor: pointer;
    }
    .l-value-lt {
      align-items: center;
      width: 48%;
      font-size: 14px;
      img {
        width: 22px;
        height: 22px;
      }

      b {
        font-size: 16px;
      }
    }

    .l-value-rt {
      // width: 48%;

      .progress-tip {
        justify-content: space-between;
        margin-top: 10px;

        .progress-tip-list {
          cursor: pointer;

          span {
            margin: 0 5px;
            font-size: 14px;
          }

          .radius-icon {
            display: inline-block;
            width: 14px;
            height: 14px;
            text-align: center;
            line-height: 12px;
            border-radius: 50%;

            i {
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
            }
          }

          &.progress-tip-list0 {
            .radius-icon {
              background: rgba(250, 173, 20, 0.2);

              i {
                background: #f8b634;
                border: 4px solid rgba(250, 173, 20, 0.2);
              }
            }
          }
          &.progress-tip-list1 {
            .radius-icon {
              background: rgba(75, 110, 239, 0.2);

              i {
                background: #4b6eef;
                border: 4px solid rgba(250, 173, 20, 0.2);
              }
            }
          }
          &.progress-tip-list2 {
            .radius-icon {
              background: rgba(105, 222, 168, 0.2);

              i {
                background: #69dfa9;
                border: 4px solid rgba(105, 222, 168, 0.2);
              }
            }
          }
        }

        .font-yellow {
          color: #f8b634;
        }
        .font-green {
          color: #69dea9;
        }
        .font-purple {
          color: #6e7bc3;
        }
      }

      ::v-deep .el-progress-bar {
        padding-right: 0 !important;
      }

      ::v-deep .el-progress-bar__outer {
        background: #4b6eef !important;
        border-radius: 0 !important;
      }

      ::v-deep .el-progress-bar__inner {
        background: #f8b634 !important;
        border-radius: 0 !important;
      }

      ::v-deep .el-progress__text {
        display: none !important;
      }
    }
  }

  .little-word {
    margin-left: 6px;
    color: #8c8c8c;
  }

  .things {
    display: flex;
    padding: 20px 0;
    .thing {
      margin-right: 10px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      display: flex;
      flex-direction: column;

      &:last-of-type {
        margin-right: 0;
      }

      .t-title {
        background: rgba(243, 245, 252, 0.5);
        padding: 10px 20px;
        color: #4b6eef;
        border-bottom: 1px solid #e5e5e5;
      }

      .t-bottom {
        flex: 1;
        padding: 20px 10px;

        .el-row {
          margin-bottom: 10px;
        }
      }
    }
  }
  .tlevel {
    margin-left: 20px;
    font-weight: 700;
  }
  .overview {
    margin-top: -15px;
    text-align: right;

    span {
      margin-left: 20px;
      display: inline-flex;
      align-items: center;

      i {
        font-style: normal;
        font-size: 24px;
        color: #fa541c;
        text-align: center;
        font-weight: 400;
      }

      &:nth-of-type(2) {
        i {
          color: #4b6eef;
        }
      }
    }
  }
}
.font-grey {
  color: #8c8c8c;
}
::v-deep {
  .el-col {
    padding: 0 !important;
  }

  .cell {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
